<template>
    <div class="app-container">
        <div class="files-top" style="overflow: hidden;padding:20px;background: #f8f8f8">
            <div style="width: 100%;overflow-x: auto;overflow-y: hidden;" class="tabTitle">
                <div style="white-space: nowrap;"  class="title">
                    <div class="title-item" :class="{'active':curKey == item.classId}" style="display: inline-block;text-align: center;margin-right:40px;font-size:12px;cursor: pointer" @click="onchangeTab(item.classId)" v-for="item in fileList">
                        <div style="padding-bottom:10px;"><i class="el-icon-tickets" style="font-size:30px;"></i></div>
                        <div>{{item.className}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="border-right:1px solid #eee;height:calc(100vh - 250px);padding:20px 10px;overflow: auto">
            <el-form :inline="true" size="mini" label-width="60px">
                <el-form-item label="关键字">
                    <el-input
                            v-model="keywords"
                            size="small"
                            placeholder="请输入关键字"
                            prefix-icon="el-icon-search">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            @click="getList()"
                            type="primary">
                        查询
                    </el-button>
                </el-form-item>
            </el-form>


            <div class="management-list">
                <el-tree
                        class="my-tree"
                        ref="vuetree"
                        @node-click="nodeClick"
                        highlight-current
                        :data="data"
                        node-key="articleId"
                        default-expand-all
                        :props="props"
                        :expand-on-click-node="false">
                          <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                               <span>
                                          <el-button
                                                  type="text"
                                                  size="mini"
                                                  @click="toLink(data)">
                                            查看
                                          </el-button>

                                    </span>
                          </span>
                </el-tree>
            </div>
        </div>
    </div>
</template>
<script>
    import {getRoleList,RoleInfo,getPermissions,delRoles,getDeptList,articleClassList,articleList} from '@/api/management'
    import Tinymce from '@/components/Tinymce'
    import store from '@/store'
    const defaultListQuery = {
        pageNum: 1,
        pageSize: 1000,
    };
    const defaultFileForm = {
        roleName:null,
        permissions:['index']
    };
    export default {
        name: "managementSetting",
        data(){
            return{
                listQuery: Object.assign({}, defaultListQuery),
                show:true,
                btnLoading:false,
                roles:store.getters.roles ? store.getters.roles : [],
                data : [],
                props: {
                    label: 'articleTitle',
                    children: 'children'
                },
                curKey:-1,
                classId:this.$route.query.classId,
                fileList:[],
                keywords:'',
                curItem:{}
            }
        },
        components: {Tinymce},
        created() {
            this.getfilesList().then((res)=>{
                this.curKey = this.classId;
                this.getList();
            });
        },
        filters: {

        },
        methods:{
            toLink(data){
                let typeArray = data.articleFile.split(".");
                let type = typeArray[typeArray.length-1];
                if(type == 'pdf'){
                    window.open(data.articleFile)
                }else{
                    window.open("https://view.officeapps.live.com/op/view.aspx?src="+data.articleFile)
                }

            },
            //获取文档分类列表
            getfilesList(){
                return articleClassList().then((res)=>{
                            this.fileList = res;
                        }).catch(()=>{
                        })
            },

            //切换商品类别
            onchangeTab(key){
                this.curKey = key;
                this.listQuery.keyword = '';
                this.data = [];
                this.curItem = {};
                this.getList();
                $(".tabTitle").animate({ scrollLeft: $(".tabTitle").scrollLeft()+$(".title-item.active").offset().left - ($(".tabTitle").offset().left)-210}, 500);
            },

            //去除不要的children
            forTree(list){
                let newList = list;
                if(newList.length){
                    for (let i = 0; i<newList.length; i++){
                        if(newList[i].children && newList[i].children.length > 0){
                            this.forTree(newList[i].children)
                        }else{
                            delete newList[i].children;
                        }
                    }
                    return newList
                }
            },
            nodeClick(data){
                this.curItem = data;
            },

            /**
             *获取列表
             **/
            getList() {
                this.dataLoading = true;
                let listQuery = {classId: this.curKey,keywords:this.keywords};
                articleList(listQuery).then(res => {
                    this.dataLoading = false;
                    if(res.length > 0){
                        this.data = this.forTree(res);
                        this.curItem = this.data[0];
                        this.show = true;
                        // this.$nextTick(function(){
                        //     this.$refs['vuetree'].setCurrentKey(this.curItem.articleId);
                        // })

                    }else{
                        this.show = false
                    }

                }).catch(()=>{
                    this.dataLoading = false;
                })
            },

        }

    }
</script>

<style lang="scss">
    .title-item.active{
        color:#409eff
    }
    .title-item{
        color:#888
    }
    .custom-tree-node{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        font-size:12px;
        .label-span{
            font-size: 12px;
            color: #666666;
        }

    }


</style>
